<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { My2 } from '@nutui/icons-vue-taro';
import { listFamily } from '@/service';
import type { Family } from '@/interface';

const familyList = ref<Family[]>([]);

onMounted(() => {
  listFamily().then((res: Service.SuccessResult) => {
    familyList.value = [...res.success];
  });
});
</script>

<template>
  <basic-layout :show-tab-bar="false">
    <custom-nav-bar left-show title="我的家庭" />
    <div class="w-375px text-30px text-primary bg-#fafafa">
      <nut-cell-group title="拥有的家庭列表" :desc="`您可以查看${familyList.length | 0}个家庭的礼簿和记录带礼记录`">
        <nut-cell
          v-for="(item, index) in familyList"
          :key="index"
          class="bg-#22c3aa color-#fff"
          :title="item.myFamily ? '我自己' : item.userName"
          :sub-title="`家庭号：${item.familyId}`"
        >
          <template #link>
            <My2 v-show="item.myFamily" color="#22c3aa" />
          </template>
        </nut-cell>
      </nut-cell-group>
    </div>
  </basic-layout>
</template>

<style scoped lang="scss"></style>
